<template>
	<uni-popup ref="popupRef" type="bottom" background-color="#F9F6F6" borderRadius="24rpx 24rpx 0rpx 0rpx" :is-mask-click="false">
		<view class="refuse_pop">
			<view class="pop_title_box">
				<view class="pop_title">
					<text>全部订单</text>
					<text class="order_num">({{ orderList.length }})</text>
				</view>
				<uni-icons @click="handleClosePop()" class="closeempty_icon" type="closeempty" size="26"></uni-icons>
			</view>
			<view class="order_list_box">
				<view class="order_item_box">
					<view class="order_head_box">
						<view class="server_name_box">
							<image class="server_img" :src="orderInfo.goodsAvatar"></image>
							<view class="server_name">{{ orderInfo.goodsName }}</view>
						</view>
						<view class="server_price">¥{{ orderInfo.payAmount }}</view>
					</view>
					<view class="server_detail_info">
						<view class="detail_item_box">
							<view class="detail_label">服务：</view>
							<view class="detail_value">
								<view>每次{{ orderInfo.goodsSkuServiceTime }}</view>
								<view class="dividing_line"></view>
								<view>宠物{{ orderInfo.petNum }}只</view>
							</view>
						</view>
						<view class="detail_item_box">
							<view class="detail_label">天数：</view>
							<view class="detail_value detail_date_box">共{{ orderInfo.serviceDays }}天</view>
						</view>
						<view class="detail_item_box">
							<view class="detail_label l_h16">地址：</view>
							<view class="detail_value address_item_box l_h16">
								<text class="distance">
									距您{{
										Number(orderInfo.linearDistance) >= 1000
											? new BigNumber(orderInfo.linearDistance).div(1000).toNumber().toFixed(2) + "km"
											: orderInfo.linearDistance + "m"
									}}
								</text>
								<text class="dividing_line"></text>
								<text>{{ orderInfo.address }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="order_item_box" v-for="item in orderList" :key="item.id">
					<view class="server_detail_info">
						<view class="item_head_box" :class="![0, 1, 2, 3].includes(item.status) ? 'item_head_box_last' : ''">
							<view class="order_date_box">
								<view class="date_label">时间：</view>
								<view class="date_value">{{ item.serviceStartTime }}</view>
							</view>
							<view class="head_right_box">
								<view class="order_status">{{ getStatusText(item.status) }}</view>
								<uni-icons type="right" size="20"></uni-icons>
							</view>
						</view>
						<view class="operation_btn_box" v-if="[0, 1, 2, 3].includes(item.status)">
							<view class="xjs-btn-primary-plain hollow_btn btn_mg" v-if="[0, 1, 2, 3].includes(item.status)" @click="handleContact()">联系客户</view>
							<view class="xjs-btn-primary solid_btn btn_mg" v-if="[1].includes(item.status)" @click="handleBeginServer(item)">开始服务</view>
							<view class="xjs-btn-primary solid_btn btn_mg" v-if="[2].includes(item.status)" @click="handleEndServer(item)">完成服务</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import api from "@/api/index";
import BigNumber from "bignumber.js";

let orderInfo = reactive({});
let orderList = reactive([]);

let props = defineProps({
	onDataInit: {
		type: Function
	}
});

const getOrderData = async () => {
	const { data = [] } = await api({
		method: "get",
		url: `/mall/order/order-detail/getOrderDetailList`,
		contentType: "json",
		data: {
			orderId: orderInfo.id
		}
	});
	Object.assign(orderList, data);
};

const getStatusText = (status) => {
	switch (status) {
		case 0:
			return "待接单";
		case 1:
			return "待服务";
		case 2:
			return "服务中";
		case 3:
			return "已完成";
		case 4:
			return "已关闭";
		default:
			return "";
	}
};

let popupRef = ref();
const handleOpenPop = async (item) => {
	orderInfo = JSON.parse(item);
	console.log(orderInfo);
	await getOrderData();
	await popupRef.value.open();
};
const handleClosePop = () => {
	popupRef.value.close();
};
// 联系客户
const handleContact = () => {
	uni.makePhoneCall({
		phoneNumber: orderInfo.userPhone
	});
};
// 开始服务
const handleBeginServer = async (item) => {
	uni.showModal({
		title: "提示",
		content: "确定开始服务吗？",
		success: async (res) => {
			if (res.confirm) {
				const res = await api({
					method: "post",
					url: `/mall/order/order-detail/startService`,
					data: {
						id: item.id,
						type: 2
					}
				});
				if (res.code == 0) {
					uni.showToast({
						title: "操作成功",
						icon: "none"
					});
					await getOrderData();
					await props.onDataInit();
				}
			}
		}
	});
};
// 完成服务
const handleEndServer = async (item) => {
	uni.showModal({
		title: "提示",
		content: "确定完成服务吗？",
		success: async (res) => {
			if (res.confirm) {
				const res = await api({
					method: "post",
					url: `/mall/order/order-detail/finishV2`,
					data: {
						id: item.id,
						type: 2
					}
				});
				if (res.code == 0) {
					uni.showToast({
						title: "操作成功",
						icon: "none"
					});
				}
				await getOrderData();
				await props.onDataInit();
			}
		}
	});
};
defineExpose({
	handleOpenPop,
	handleClosePop
});
</script>

<style scoped lang="scss">
.refuse_pop {
	max-height: 90vh;
	overflow-y: auto;
	width: 100%;
	background: #f9f6f6;
	border-radius: 24rpx 24rpx 0rpx 0rpx;
	padding: 0 32rpx 68rpx 32rpx;
	box-sizing: border-box;
	position: relative;
	line-height: 1;

	.pop_title_box {
		display: flex;
		justify-content: space-between;
		position: sticky;
		padding-top: 48rpx;
		padding-bottom: 50rpx;
		top: 0;
		left: 0;
		background: #f9f6f6;

		.pop_title {
			font-weight: bold;
			font-size: 40rpx;
			color: #1b2120;

			.order_num {
				font-size: 30rpx;
				color: #7c807f;
			}
		}

		.closeempty_icon {
			color: #1b2120;
			font-weight: bold;
		}
	}

	.order_item_box {
		width: 100%;
		background: #ffffff;
		border-radius: 24rpx;
		padding: 32rpx;
		box-sizing: border-box;
		margin-bottom: 32rpx;

		.order_head_box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 32rpx;

			.server_name_box {
				display: flex;
				align-items: center;

				.server_img {
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
				}

				.server_name {
					font-weight: bold;
					font-size: 32rpx;
					color: #1a1a1a;
					margin-left: 16rpx;
				}
			}

			.server_price {
				font-weight: 400;
				font-size: 30rpx;
				color: #1b2120;
			}
		}

		.server_detail_info {
			width: 100%;
			background: #f8f8f8;
			border-radius: 24rpx;
			padding: 32rpx 24rpx;
			box-sizing: border-box;

			.detail_item_box {
				display: flex;
				flex-direction: row;
				margin-bottom: 32rpx;

				.detail_label {
					width: 80rpx;
					font-weight: bold;
					font-size: 26rpx;
					color: #7c807f;
				}

				.detail_value {
					display: flex;
					flex-direction: row;
					align-items: center;
					font-weight: 400;
					font-size: 26rpx;
					color: #5c5e5e;
					width: calc(100% - 80rpx);
					word-break: break-all;
					flex-wrap: wrap;

					.distance {
						color: #6363ff;
					}
				}

				.address_item_box {
					display: block;
				}

				.detail_date_box {
					flex-direction: row;

					.date_text {
						border-right: 1rpx solid #cacccc;
						padding-right: 8rpx;
						line-height: 1;
						margin-right: 8rpx;
					}

					.date_text:last-child {
						border-right: none;
					}
				}

				.dividing_line {
					display: inline-block;
					width: 1rpx;
					height: 24rpx;
					background: #cacccc;
					margin: 0 8rpx;
				}
			}

			.detail_item_box:last-child {
				margin-bottom: 0;
			}
		}

		.item_head_box {
			display: flex;
			justify-content: space-between;
			padding-bottom: 32rpx;
			border-bottom: 1rpx solid #e4e6e6;

			.order_date_box {
				display: flex;
				align-items: center;
				flex-direction: row;

				.date_label {
					font-weight: 500;
					font-size: 26rpx;
					color: #7c807f;
				}

				.date_value {
					font-weight: 400;
					font-size: 26rpx;
					color: #1b2120;
					margin-left: 8rpx;
				}
			}

			.head_right_box {
				display: flex;
				align-items: center;
				flex-direction: row;

				.order_status {
					font-weight: 500;
					font-size: 26rpx;
					color: #1b2120;
				}

				uni-icons {
					color: #1b2120;
					margin-left: 16rpx;
				}
			}
		}

		.item_head_box_last {
			border-bottom: none;
			padding-bottom: 0;
		}

		.operation_btn_box {
			display: flex;
			flex-direction: row;
			justify-content: right;
			margin-top: 32rpx;

			.hollow_btn {
				width: 196rpx;
				height: 72rpx;
			}

			.solid_btn {
				width: 196rpx;
				height: 72rpx;
			}

			.btn_mg {
				margin-right: 16rpx;
			}

			.btn_mg:last-child {
				margin-right: 0;
			}
		}
	}
}

.f_wrap {
	flex-wrap: wrap;
}

.l_h16 {
	line-height: 1.6;
}
</style>
